<div class="challenge-card">
  <div class="ev-card-panel card-bt-margin">
    <div class="ev-md-container ev-panel-title">
      <div class="row row-lr-margin">
        <div class="col-sm-12 col-xs-12 col-lr-pad">
          <h5 class="fw-light">Leaderboard</h5>
        </div>
        <div
          class="col-sm-12 md-body-1 col-lr-pad fs-16 fw-light"
          [innerHTML]="challenge.leaderboard_description"
          *ngIf="challenge.leaderboard_description"
        ></div>
      </div>
    </div>
    <div class="ev-md-container">
      <div (click)="refreshLeaderboard()" class="pointer update-page" *ngIf="showLeaderboardUpdate">
        <span class="text-white"
          >Page is outdated, Click to update&nbsp; <i class="fa fa-refresh text-highlight"></i
        ></span>
      </div>
      <div class="row">
        <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box col-lr-margin">
          <app-selectphase
            [phaseSplits]="filteredPhaseSplits"
            [phaseSelectionType]="phaseSelectionType"
            [phaseSelectionListType]="phaseSelectionListType"
            [selectedPhaseSplitUrlChange]="selectedPhaseSplitUrlChange"
            #phasesplitselect
          >
          </app-selectphase>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box col-lr-margin">
          <ng-container *ngIf="leaderboard.length > 0 && selectedPhaseSplit != null">
            <mat-form-field class="select_phase_form">
              <mat-label class="fs-16 phase-placeholder" [ngClass]="{ 'hide-label': selectedMetric !== '' }">Metric as</mat-label>
              <mat-select class="rm-margin" [(ngModel)]="selectedMetric">
                <mat-select-trigger>
                  <span class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                    <span class="fw-light">Metric:</span> {{ selectedMetric }} &nbsp;
                  </span>
                </mat-select-trigger>
                <mat-option (click)="selectedMetricUrlChange(selectedPhaseSplit, key)" [value]="key" *ngFor="let key of selectedPhaseSplit.leaderboard_schema.labels">
                  <span class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                    <span class="fw-light">Metric:</span> {{ key }} &nbsp;
                  </span>
                </mat-option>
              </mat-select>
            </mat-form-field>
          </ng-container>
        </div>
      </div>
    </div>
    <div class="ev-card-body exist-team-card">
      <div class="row row-lr-margin">
        <div class="horizontal-scroll">
          <div class="col-sm-12 col-lr-pad">
            <div *ngIf="leaderboard.length <= 0 && selectedPhaseSplit == null" class="fw-light result-wrn">
              No phase selected.
            </div>
            <div *ngIf="selectedPhaseSplit" class="result-wrn content fw-light">
              <div *ngIf="leaderboard.length > 0">
                <mat-chip-list> 
                  <mat-chip>B</mat-chip> - Baseline submission 
                </mat-chip-list>
                <mat-chip-list class="leaderboard-description-span private">
                  <mat-chip>P</mat-chip> - Private submission
                </mat-chip-list>
              <!-- <mat-chip-list class="pull-right" *ngIf="isChallengeHost">
                <div
                  (click)="showLeaderboardByLatestOrBest()"
                  class="btn-switch sort-leaderboard-switch"
                  [ngClass]="{ 'btn-switch--on': showLeaderboardByLatest }"
                  [(ngModel)]="showLeaderboardByLatest"
                  ngDefaultControl
                >
                  <div
                    class="btn-switch-circle"
                    [ngClass]="{ 'btn-switch--on': showLeaderboardByLatest }"
                    [(ngModel)]="showLeaderboardByLatest"
                    ngDefaultControl
                  ></div>
                </div>
                <span class="w-400"> {{ sortLeaderboardTextOption }}</span>
              </mat-chip-list> -->
              </div>
                <mat-checkbox
                  class="pull-right complete-leaderboard"
                  *ngIf="isChallengeHost && showLeaderboardToggle && numberOfAllEntries > 0"
                  (change)="toggleLeaderboard(getAllEntries)"
                  [(ngModel)]="getAllEntries"
                >
                  <label class="fw-light complete-leaderboard-text"> {{ getAllEntriesTextOption }}</label>
                </mat-checkbox>
            </div>

            <table *ngIf="leaderboard.length > 0 && selectedPhaseSplit" class="centered highlight fw-light">
              <thead>
                <tr class="content">
                  <td data-field="rank" class="align-center">
                    <a (click)="sortNonMetricsColumn('rank')">
                      <span class="fw-light fs-18">Rank </span>
                      <span class="fa-stack fa-1x">
                        <i
                          class="fa fa-sort-asc fa-stack-1x"
                          [ngClass]="
                            reverseSort && sortColumn == 'rank' ? 'text-med-black' : 'text-light-black w-300'
                          "
                        ></i>
                        <i
                          class="fa fa-sort-desc fa-stack-1x"
                          [ngClass]="
                            !reverseSort && sortColumn == 'rank' ? 'text-med-black' : 'text-light-black w-300'
                          "
                        ></i>
                      </span>
                    </a>
                  </td>
                  <td data-field="team" class="align-center fw-light">
                    <a (click)="sortNonMetricsColumn('string')">
                      <span class="fw-light fs-18">Participant Team</span>
                      <span class="fa-stack fa-1x">
                        <i
                          class="fa fa-sort-asc fa-stack-1x"
                          [ngClass]="
                            reverseSort && sortColumn == 'string' ? 'text-med-black' : 'text-light-black fw-light'
                          "
                        ></i>
                        <i
                          class="fa fa-sort-desc fa-stack-1x"
                          [ngClass]="
                            reverseSort && sortColumn == 'string' ? 'text-med-black' : 'text-light-black fw-light'
                          "
                        ></i>
                      </span>
                    </a>
                  </td>
                  <td
                    *ngFor="let key of leaderboard[0].leaderboard__schema.labels; index as i"
                    [attr.data-index]="i"
                    class="align-center fw-light"
                  >
                    <a (click)="sortMetricsColumn(i)">
                      <span class="fw-light fs-18 leaderboard-label" *ngIf="isMetricOrderedAscending(key)">{{ key }} (&#x2191;)  <span class="description" *ngIf="getLabelDescription(key).length != 0">{{getLabelDescription(key)}}</span> </span>
                      <span class="fw-light fs-18 leaderboard-label" *ngIf="!isMetricOrderedAscending(key)">{{ key }} (&#x2193;) <span class="description" *ngIf="getLabelDescription(key).length != 0">{{getLabelDescription(key)}}</span> </span>
                      <span class="fa-stack fa-1x">
                        <i
                          class="fa fa-sort-asc fa-stack-1x"
                          [ngClass]="
                            reverseSort && sortColumn == 'number' ? 'text-med-black' : 'text-light-black fw-light'
                          "
                        ></i>
                        <i
                          class="fa fa-sort-desc fa-stack-1x"
                          [ngClass]="
                            !reverseSort && sortColumn == 'number' ? 'text-med-black' : 'text-light-black fw-light'
                          "
                        ></i>
                      </span>
                    </a>
                  </td>
                  <td data-field="submission_time" class="align-center fw-light">
                    <a (click)="sortNonMetricsColumn('date')">
                      <span class="fs-18 fw-light">Submitted at</span>
                      <span class="fa-stack fa-1x">
                        <i
                          class="fa fa-sort-asc fa-stack-1x"
                          [ngClass]="reverseSort && sortColumn == 'date' ? 'text-med-black' : 'text-light-black fw-light'"
                        ></i>
                        <i
                          class="fa fa-sort-desc fa-stack-1x"
                          [ngClass]="!reverseSort && sortColumn == 'date' ? 'text-med-black' : 'text-light-black fw-light'"
                        ></i>
                      </span>
                    </a>
                  </td>
                  <td data-field="" *ngIf="showSubmissionMetaAttributesOnLeaderboard">
                    <span class="fs-18 fw-light">Meta Attributes</span>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let key of leaderboard"
                    (click)="updateHighlightedEntry(initial_ranking[key.id])" class="content"
                    [ngClass]="highlightedEntry == initial_ranking[key.id] ? 'content highlight-leaderboard' : 'content'">
                  <td>{{ initial_ranking[key.id] }}</td>
                  <td class="fw-light">
                    {{ key.submission__participant_team__team_name }}
                    <span *ngIf="key.submission__method_name">({{key.submission__method_name | slice:0:30}})</span>
                    <span *ngIf="key.submission__is_public === false && isSelectedPhaseLeaderboardPublic" class="private">
                      <mat-chip-list>
                        <mat-chip>P</mat-chip>
                      </mat-chip-list>&nbsp;
                    </span>
                    <span *ngIf="key.submission__is_baseline">
                      <mat-chip-list>
                        <mat-chip>B</mat-chip>
                      </mat-chip-list>
                    </span>
                  </td>
                  <td *ngFor="let score of key.result">
                    <span class="fa-stack fa-1x partial-evaluation" *ngIf="score == '#'">
                      <mat-chip-list>
                        <mat-chip>E</mat-chip>
                      </mat-chip-list>
                    </span>
                    <span *ngIf="score !== '#'">{{ score | number: setLeaderboardPrecisionValue }}</span>
                  </td>
                  <td>
                    <div>{{ key.submission__submitted_at_formatted }}</div>
                  </td>
                  <td *ngIf="showSubmissionMetaAttributesOnLeaderboard">
                    <button
                      class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-12"
                      [disabled]="
                        key.submission__submission_metadata == undefined || key.submission__submission_metadata == null
                      "
                      type="submit"
                      value="view"
                      (click)="showMetaAttributesDialog(key.submission__submission_metadata)"
                    >
                      View
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div *ngIf="leaderboard.length <= 0 && selectedPhaseSplit">
              <p class="fw-light">No results to show!</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
